<template>


	<view class="main">
		<u-navbar :fixed="false" title="全部考勤" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="container">

			<view class="top">
				<view class="content">
					<ren-calendar :disabledAfter='true' ref='ren' :markDays='markDays' @onDayClick='onDayClick'></ren-calendar>
				</view>
			</view>

			<view class="bykq row space-between">
				<u-tabs :list="list1" @click="clicktab"></u-tabs>
				<view class="row_a_c zgg center" @click="ksxz()">
					<view class="zgwz">{{positionName}}</view>
					<u-icon size="20" name="arrow-down-fill"></u-icon>
				</view>
				<u-picker @cancel="showKs=false" :show="showKs" :columns="TerritoryData" keyName="name" @confirm="confirmKs"></u-picker>
			</view>


			<z-paging ref="paging" v-model="listData" @query="queryList" usePageScroll>
				<view class="sxb" v-for="(item, index) in listData" :key="index">
					<view class="sxbb" @click="toUrYgkq(item.staff.id)">
						<view class="row space-between">
							<view class="row">
								<view>
									<image class="sbk" :src="item.staff.avatar"></image>
								</view>
								<view class="sbdka ">
									<view class="sbdkwz">{{item.staff.name}}</view>
									<view class="sbdktime">打卡时间：{{getsftime(item.clock_in)}}---{{getsftime(item.clock_out)}}</view>
								</view>
							</view>
							<view class="column_c">
								<!-- "status": 3 //状态 1已排班 2正常 3请假 4调休 5迟到 6早退 7旷工 8缺卡 -->
								<view class="xbsj center" v-if="item.status==1">已排班</view>
								<view class="xbsj center" v-if="item.status==2">正常</view>
								<view class="xbsj center" v-if="item.status==3">请假</view>
								<view class="xbsj center" v-if="item.status==4">调休</view>
								<view class="xbsj center" v-if="item.status==5">迟到</view>
								<view class="xbsj center" v-if="item.status==6">早退</view>
								<view class="xbsj center" v-if="item.status==7">旷工</view>
								<view class="xbsj center" v-if="item.status==8">旷工</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>


		</view>

	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
	import api_clockin from '@/api/clockin.js';
	import api_team from '@/api/team.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';


	export default {
		components: {
			RenCalendar
		},
		mixins: [ZPMixin],
		data() {
			return {
				showKs: false,
				access_token: '',
				list1: [{
					name: '异常',
				}, {
					name: '迟到/早退',
				}, {
					name: '缺卡'
				}],
				indexArr: '',
				valueArr: '',
				curDate: '',
				markDays: [],
				status: 3, //筛选状态 1全部 2正常 3异常 4迟到早退 5缺卡 6调休 7请假
				position: null,
				positionName: '全部职位',
				TerritoryData: [],
				date: null,
				listData: [],
			};
		},
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.date = this.getNowDate();
				this.getPositionListFuc(); //获取职位列表
				// this.getattendanceListFuc(); //获取诊所考勤列表
			}
		},

		methods: {

			clicktab(item) {
				if (item.index == 0) {
					this.status = 3
				}
				if (item.index == 1) {
					this.status = 4
				}
				if (item.index == 2) {
					this.status = 5
				}
				// this.getattendanceListFuc();
				this.$refs.paging.reload();
			},

			ksxz() {
				this.showKs = true;
			},

			//确认科室
			confirmKs(e) {
				this.position = e.value[0].id;
				this.positionName = e.value[0].name;
				// this.getattendanceListFuc();
				this.$refs.paging.reload();
				this.showKs = false;

			},


			async queryList(pageNo, pageSize) {

				var per = {
					no_page: pageNo,
					page_size: pageSize,
					status: this.status,
					date: this.date,
				}
				if (this.position) {
					per.position = this.position;
				}
				const res = await api_clockin.getattendanceList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}

			},


			//获取诊所考勤列表
			// async getattendanceListFuc() {
			// 	var per = {
			// 		status: this.status,
			// 		date: this.date,
			// 	}
			// 	if (this.position) {
			// 		per.position = this.position;
			// 	}
			// 	const res = await api_clockin.getattendanceList(per);
			// 	if (res.code == 1) {
			// 		this.listData = res.data.list
			// 		return;
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },

			//获取职位列表
			async getPositionListFuc() {
				const res = await api_team.getPositionList();
				if (res.code == 1) {
					var arr_list = res.data.list;
					arr_list.unshift({ id: null, name: "全部职位" });


					this.TerritoryData = [arr_list];
					return;
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			//获取当前时间
			getNowDate() {
				const now = new Date();
				// 格式化日期为 YYYY-MM-DD
				const year = now.getFullYear(); // 获取年份
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份（0-11），+1 后补零
				const day = String(now.getDate()).padStart(2, '0'); // 获取日期，补零
				const formattedDate = `${year}-${month}-${day}`;
				console.log(formattedDate); // 输出格式为 2024-10-12
				return formattedDate;
			},

			getsftime(timees) {
				const dateTime = timees;
				const timePart = dateTime.split(" ")[1]; // 分割字符串，取第二部分
				const timeShort = timePart.slice(0, 5); // 截取前5个字符
				console.log(timeShort); // 输出：09:51
				return timeShort;
			},

			toUrl(url) {
				this.navTo(url);
			},
			onDayClick(data) {
				this.curDate = data.date;
				this.date = this.curDate;
				this.getattendanceListFuc();
			},


			toUrYgkq(id) {
				uni.navigateTo({
					url: '/pages/employee/employee-attendance?id=' + id
				});
			},


		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 1400rpx;
		background-color: #f6f7f9;
	}

	.content {
		.change {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;
			height: 100rpx;
			color: #b89249;
			background-color: #21191b;
		}
	}

	.top {
		margin-top: 15rpx;
	}

	.sxb {
		padding: 0 32rpx;
		margin-top: 30rpx;
	}

	.bykq {
		padding: 0 32rpx;
		margin-top: 20rpx;

	}

	.sxbb {
		height: 160rpx;
		width: 100%;


		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 20px;

	}

	.sbk {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
	}



	.sbdka {
		margin-left: 60rpx;
		width: 390rpx;
	}

	.sbdkwz {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;
	}

	.sbdktime {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 24rpx;
	}

	.xbsj {
		margin-top: 15rpx;
		width: 80rpx;
		height: 40rpx;
		background: #FF2E2E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;

		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;

	}

	.zgg {
		width: 290rpx;
		height: 60rpx;
		background: #ffffff;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		padding: 20rpx;
		margin-top: 6px;
	}

	.zgwz {

		font-weight: 400;
		font-size: 28rpx;
		color: #7F7F7F;
		margin-right: 20rpx;

	}
</style>